<#assign pageName="公共模板实例-附件上传">
<@override name="head-styles">
    <style>
        .layui-input-block{
            margin-left:0px;
        }
    </style>
</@override>
<@override name="page-content">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>${pageName}</legend>
    </fieldset>
    <h4 style="font-weight:bold; padding:10px;">1、功能演示</h4>
    <form class="layui-form padding-10" lay-filter="formTemplate">
        <div class="layui-form-item">
             <label class="layui-form-label">
                 <b style="color:red;padding:2px;vertical-align: middle;">*</b>合同附件:
             </label>
             <div class="layui-input-block upload">
                 <div>
                     <button type="button" class="layui-btn layui-btn-danger upload-sel" data-type="合同附件">
                         <i class="layui-icon layui-icon-upload-drag"></i>上传文件
                     </button>
                     <div class="padding-5-0">最多上传5张，最少上传1张，每张最大不超过2M，支持jpg、png、jpeg文件格式；</div>
                 </div>
             </div>
         </div>
    </form>
    <h4 style="font-weight:bold; padding:10px;">2、实例代码</h4>
    <pre class="layui-code code-html" lay-encode=true>
        <!-- 为功能演示正常而引入注释！
        <form class="layui-form padding-10" lay-filter="formTemplate">
            <div class="layui-form-item">
                 <label class="layui-form-label">
                     <b style="color:red;padding:2px;vertical-align: middle;">*</b>合同附件:
                 </label>
                 <div class="layui-input-block upload">
                     <div>
                         <button type="button" class="layui-btn layui-btn-danger upload-sel" data-type="合同附件">
                             <i class="layui-icon layui-icon-upload-drag"></i>上传文件
                         </button>
                         <div class="padding-5-0">最多上传5张，最少上传1张，每张最大不超过2M，支持jpg、png、jpeg文件格式；</div>
                     </div>
                 </div>
             </div>
        </form>
        -->
    </pre>
    <pre class="layui-code code-js" lay-encode=true>
        <!-- 为功能演示正常而引入注释！
        <script>
        var files, opera;
        $(function(){
            layui.use(['form','layer','upload','jquery'], function(){
                var layer=layui.layer;
                var form = layui.form;
                var upload = layui.upload;
                $=layui.jquery;
                
                $('.upload img').on('click', function () {
                    layer.photos({
                        photos: '.upload',
                        anim: 0
                    });
                })
                $('.upload-sel').on('click', function(){
                    var btn = $(this);
                    var type = $(this).attr("data-type");
                    opera = layer.open({
                        type: 1,
                        title: '上传'+type,
                        area: ['820px', '460px'], // 宽高
                        btnAlign: 'r',
                        shadeClose: false, 
                        closeBtn: false,
                        content: '<div class="layui-upload margin-10">' +
                            '<button type="button" class="layui-btn" style="margin-right:10px;" id="upload-choose-btn"><i class="layui-icon layui-icon-search"></i>选择文件</button> ' +
                            '<button type="button" class="layui-btn layui-btn-normal" id="upload-confirm-btn"><i class="layui-icon layui-icon-ok"></i>确认上传</button> ' +
                            '<button type="button" class="layui-btn layui-btn-danger" onclick="closeUpload();"><i class="layui-icon layui-icon-close"></i>取消上传</button> ' +
                            '  <div class="layui-upload-list">' +
                            '    <table class="layui-table">' +
                            '      <thead>' +
                            '        <tr><th class="align-center">文件名</th>' +
                            '        <th class="align-center">大小</th>' +
                            '        <th class="align-center">状态</th>' +
                            '        <th class="align-center" width="80px">操作</th>' +
                            '      </tr></thead>' +
                            '      <tbody id="fileList"></tbody>' +
                            '    </table>' +
                            '  </div>' +
                            '</div> ',
                        success: function () {
                            var fileListView = $('#fileList'),
                            uploadListIns = upload.render({
                                elem: '#upload-choose-btn'
                               ,url: '${contextPath}/common/local/uploadimage'
                               ,size: 1024*2
                               ,accept: 'images'
                               ,acceptMime: 'image/jpg,image/png,image/jpeg'
                               ,exts: 'jpg|png|jpeg'
                               ,multiple: true
                               ,number:5
                               ,auto: false
                               ,bindAction: '#upload-confirm-btn'
                               ,data:{accept:'jpg|png|jpeg|'}
                               ,choose: function (obj) {
                                   var files = this.files = obj.pushFile(); 
                                   var uploadLength = btn.parents('.upload').children('.upload-pre').length;
                                   obj.preview(function (index, file, result) {
                                       if(parseInt(getChooseLength(files)) + parseInt(uploadLength) > 5){
                                           layer.msg("附件上传最多不能超过5张");
                                           delete files[index];
                                           return false;
                                       }else{
                                           var tr = $(['<tr id="upload-' + index + '">',
                                           '<td>' + file.name + '</td>',
                                           '<td class="align-center">' + (file.size / 1024).toFixed(1) + 'kb</td>',
                                               '<td class="align-center">等待上传</td>',
                                               '<td class="align-center">',
                                               '<button class="layui-btn layui-btn-xs upload-file-reload layui-hide">重传</button>',
                                               '<button class="layui-btn layui-btn-xs layui-btn-danger upload-file-delete">删除</button>',
                                               '</td>',
                                               '</tr>'].join(''));
    
                                           //单个重传
                                           tr.find('.upload-file-reload').on('click', function () {
                                               obj.upload(index, file);
                                           });
    
                                           //删除
                                           tr.find('.upload-file-delete').on('click', function () {
                                               delete files[index]; //删除对应的文件
                                               tr.remove();
                                               uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                           });
                                           fileListView.append(tr);
                                       }
                                   });
                               }
                               ,before: function (obj) {
                                   layer.load();
                               }
                               ,done: function(res, index){
                                   layer.closeAll('loading');
                                   if(res.code == '0'){
                                       var tr = fileListView.find('tr#upload-' + index),
                                       tds = tr.children();
                                       tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                       tds.eq(3).html(''); //清空操作
                                       var html = '<div class="upload-pre">'
                                           +'<input type="hidden" name="fileType" value="'+btn.attr("data-type")+'"/>'
                                           +'<input type="hidden" name="fileId" value="'+res.result.fileId+'"/>'
                                           +'<input type="hidden" name="fileName" value="'+res.result.fileName+'"/>'
                                           +'<input type="hidden" name="filePath" value="'+res.result.filePath+'"/>'
                                           +'<input type="hidden" name="fileExtension" value="'+res.result.fileExtension+'"/>'
                                           +'<input type="hidden" name="fileSize" value="'+res.result.fileSize+'"/>'
                                           +'<img class="upload-img" src="'+res.result.filePath+'" title="'+res.result.fileName+'"/>'
                                           +'<i class="upload-del layui-icon layui-icon-close-fill"></i>'
                                           +'</div>';
                                       btn.parent().before(html)
                                       return delete this.files[index]; //删除文件队列已经上传成功的文件
                                   }else{
                                       alert(res.msg);
                                   }
                               }
                               ,allDone: function(obj){
                                   layer.close(opera);
                               }
                               ,error: function(index, upload){
                                   layer.closeAll('loading');
                                   var tr = fileListView.find('tr#upload-' + index),
                                   tds = tr.children();
                                   tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                                   tds.eq(3).find('.upload-file-reload').removeClass('layui-hide'); //显示重传
                                   alert("上传异常！请检查！");
                               }
                           });
                        }
                    })
                })
                $('.upload').on('click', '.upload-del', function(){
                    $(this).parent().remove();
                })
            });
        })
        //获取文件长度
        function getChooseLength(uploadData){
            var chooseLength = 0;
            for(var item in uploadData){
                chooseLength++;
            }
            return chooseLength;
        }
         //关闭上传窗口
        function closeUpload(){
            for (let x in files) {
                delete files[x];
            }
            layer.close(opera);
        }
        <script>
         -->
    </pre>
    <h4 style="font-weight:bold; padding:10px;">3、功能说明</h4>
    <p>4、附件上传后台由AliyunUploadController.java OR LocalUploadController.java支持！</p>
</@override>
<@override name="page-scripts">
    <script>
        var files, opera;
        $(function(){
            layui.use(['form','layer','upload','code','jquery'], function(){
                var layer=layui.layer;
                var form = layui.form;
                var upload = layui.upload;
                $=layui.jquery;
                layui.code({elem:'.code-html',title:'html', skin:'notepad'});
                layui.code({elem:'.code-js',title:'javascript', skin:'notepad'});
                
                $('.upload img').on('click', function () {
                    layer.photos({
                        photos: '.upload',
                        anim: 0
                    });
                })
                $('.upload-sel').on('click', function(){
                    var btn = $(this);
                    var type = $(this).attr("data-type");
                    opera = layer.open({
                        type: 1,
                        title: '上传'+type,
                        area: ['820px', '460px'], // 宽高
                        btnAlign: 'r',
                        shadeClose: false, 
                        closeBtn: false,
                        content: '<div class="layui-upload margin-10">' +
                            '<button type="button" class="layui-btn" style="margin-right:10px;" id="upload-choose-btn"><i class="layui-icon layui-icon-search"></i>选择文件</button> ' +
                            '<button type="button" class="layui-btn layui-btn-normal" id="upload-confirm-btn"><i class="layui-icon layui-icon-ok"></i>确认上传</button> ' +
                            '<button type="button" class="layui-btn layui-btn-danger" onclick="closeUpload();"><i class="layui-icon layui-icon-close"></i>取消上传</button> ' +
                            '  <div class="layui-upload-list">' +
                            '    <table class="layui-table">' +
                            '      <thead>' +
                            '        <tr><th class="align-center">文件名</th>' +
                            '        <th class="align-center">大小</th>' +
                            '        <th class="align-center">状态</th>' +
                            '        <th class="align-center" width="80px">操作</th>' +
                            '      </tr></thead>' +
                            '      <tbody id="fileList"></tbody>' +
                            '    </table>' +
                            '  </div>' +
                            '</div> ',
                        success: function () {
                            var fileListView = $('#fileList'),
                            uploadListIns = upload.render({
                                elem: '#upload-choose-btn'
                               ,url: '${contextPath}/common/local/uploadimage'
                               ,size: 1024*2
                               ,accept: 'images'
                               ,acceptMime: 'image/jpg,image/png,image/jpeg'
                               ,exts: 'jpg|png|jpeg'
                               ,multiple: true
                               ,number:5
                               ,auto: false
                               ,bindAction: '#upload-confirm-btn'
                               ,data:{accept:'jpg|png|jpeg|'}
                               ,choose: function (obj) {
                                   var files = this.files = obj.pushFile(); 
                                   var uploadLength = btn.parents('.upload').children('.upload-pre').length;
                                   obj.preview(function (index, file, result) {
                                       if(parseInt(getChooseLength(files)) + parseInt(uploadLength) > 5){
                                           layer.msg("附件上传最多不能超过5张");
                                           delete files[index];
                                           return false;
                                       }else{
                                           var tr = $(['<tr id="upload-' + index + '">',
                                           '<td>' + file.name + '</td>',
                                           '<td class="align-center">' + (file.size / 1024).toFixed(1) + 'kb</td>',
                                               '<td class="align-center">等待上传</td>',
                                               '<td class="align-center">',
                                               '<button class="layui-btn layui-btn-xs upload-file-reload layui-hide">重传</button>',
                                               '<button class="layui-btn layui-btn-xs layui-btn-danger upload-file-delete">删除</button>',
                                               '</td>',
                                               '</tr>'].join(''));
    
                                           //单个重传
                                           tr.find('.upload-file-reload').on('click', function () {
                                               obj.upload(index, file);
                                           });
    
                                           //删除
                                           tr.find('.upload-file-delete').on('click', function () {
                                               delete files[index]; //删除对应的文件
                                               tr.remove();
                                               uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                           });
                                           fileListView.append(tr);
                                       }
                                   });
                               }
                               ,before: function (obj) {
                                   layer.load();
                               }
                               ,done: function(res, index){
                                   layer.closeAll('loading');
                                   if(res.code == '0'){
                                       var tr = fileListView.find('tr#upload-' + index),
                                       tds = tr.children();
                                       tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                       tds.eq(3).html(''); //清空操作
                                       var html = '<div class="upload-pre">'
                                           +'<input type="hidden" name="fileType" value="'+btn.attr("data-type")+'"/>'
                                           +'<input type="hidden" name="fileId" value="'+res.result.fileId+'"/>'
                                           +'<input type="hidden" name="fileName" value="'+res.result.fileName+'"/>'
                                           +'<input type="hidden" name="filePath" value="'+res.result.filePath+'"/>'
                                           +'<input type="hidden" name="fileExtension" value="'+res.result.fileExtension+'"/>'
                                           +'<input type="hidden" name="fileSize" value="'+res.result.fileSize+'"/>'
                                           +'<img class="upload-img" src="'+res.result.filePath+'" title="'+res.result.fileName+'"/>'
                                           +'<i class="upload-del layui-icon layui-icon-close-fill"></i>'
                                           +'</div>';
                                       btn.parent().before(html)
                                       return delete this.files[index]; //删除文件队列已经上传成功的文件
                                   }else{
                                       alert(res.msg);
                                   }
                               }
                               ,allDone: function(obj){
                                   layer.close(opera);
                               }
                               ,error: function(index, upload){
                                   layer.closeAll('loading');
                                   var tr = fileListView.find('tr#upload-' + index),
                                   tds = tr.children();
                                   tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                                   tds.eq(3).find('.upload-file-reload').removeClass('layui-hide'); //显示重传
                                   alert("上传异常！请检查！");
                               }
                           });
                        }
                    })
                })
                $('.upload').on('click', '.upload-del', function(){
                    $(this).parent().remove();
                })
            });
        })
        //获取文件长度
        function getChooseLength(uploadData){
            var chooseLength = 0;
            for(var item in uploadData){
                chooseLength++;
            }
            return chooseLength;
        }
         //关闭上传窗口
        function closeUpload(){
            for (let x in files) {
                delete files[x];
            }
            layer.close(opera);
        }
    </script>
</@override>
<@extends name="/layout/basepage.html"/> 